<template>
	<view class="container" style="background-color: #f3f5f9;">
		<view class="title" style="margin-left: 130px;">团体预约</view>
		<view class="yuyue">
			<view class="form-group">
				<label>预约日期：</label>
				<picker mode="date" :value="date" @change="onDateChange">
					<view class="picker">{{ date }}</view>
				</picker>
			</view>
			<view class="form-group">
				<label>预约时间：</label>
				<picker mode="time" :value="time" @change="onTimeChange">
					<view class="picker">{{ time }}</view>
				</picker>
			</view>
		</view>
		<view class="team">
			<view class="form-group">
				<label class ="red">团队名称<view style="color: red">*</view>：</label>
				<input class="aaa" type="text" v-model="teamName" placeholder="请输入团队名称" />
			</view>
			<view class="form-group">
				<label class ="red">团体人数<view style="color: red">*</view>：</label>
				<input class="aaa" type="number" v-model.number="totalPeople" placeholder="请输入预约人数" />
			</view>
		</view>
		<view class="form-group" v-for="(member, index) in members" :key="index">
			<view class="msg001" >
				<label class="label01">团体负责人 {{ index + 1 }}：</label>
				<image class="img001" @click="removeMember(index)"  src="../../static/111.png"> </image>
			</view>
			<view class="ccc">
				<view>
					<label class ="red" style="font-weight: 600;">姓名<view style="color: red">*</view>：</label>
					<input class="aaa" type="text" v-model="membername" placeholder="请输入同行人姓名" />
				</view>
				<view>
					<label class ="red" style="font-weight: 600;">证件类型<view style="color: red">*</view>：</label>
					<input class="aaa" type="text" v-model="memberidType" placeholder="请输入证件类型" />
				</view>
				<view>
					<label class ="red" style="font-weight: 600;">证件号码<view style="color: red">*</view>：</label>
					<input class="aaa" type="text" v-model="memberidNumber" placeholder="请输入证件号码" />
				</view>
				<view>
					<label class ="red" style="font-weight: 600;">手机号码<view style="color: red">*</view>：</label>
					<input class="aaa" type="number" v-model.number="memberphoneNumber" placeholder="请输入手机号码" />
				</view>
			</view>
		</view>
    <button class="button02" @click="addMember"   >
      <image class="img003" src="../../static/333.png"></image> <text class="t1">添加同行人</text>
    </button>
    <view class="extra-info">
      <image class="img004" src="../../static/444.png"></image>
      <text class="t2">最多可预约成人4人，儿童3人</text>
    </view>

		<view >

			<button class="button01" @click="submitReserve">提交预约</button>

		</view>



	</view>
</template>

<script>
	import UploadImage from "../../uni_modules/uni-file-picker/components/uni-file-picker/upload-image.vue";

  export default {
    components: {UploadImage},
    		data() {
    			return {
    				date: '2024-7-16',
    				time: '09:00:00',
    				teamName: '',
    				totalPeople: '',
    				members: [{
    					name: '',
    					idType: '',
    					idNumber: '',
    					phoneNumber: '',
    					userInfoType: 'group'
    				}, ],
    			};
    		},

    		methods: {

    			onDateChange(e) {
    				this.date = e.detail.value;
    			},
    			onTimeChange(e) {
    				this.time = e.detail.value;
    			},
    			onIdTypeChange(e) {
    				this.idTypeIndex = e.detail.value;
    			},

    			addMember() {
    				if (this.members.length < this.totalPeople) {
    					this.members.push({
    						name: '',
    						idType: '',
    						idNumber: '',
    						phoneNumber: ''
    					});
    				} else {
    					uni.showToast({
    						title: '已达到预约人数上限',
    						icon: 'none'
    					});
    				}



    			},
    			removeMember(index) {
    				if (this.members.length > 1) { // 假设至少保留一个成员
    					this.members.splice(index, 1);
    					this.updateTotalPeople();
    				}
    			},
    			updateTotalPeople() {
    				this.totalPeople = this.members.length;
    			},
    			submitReserve() {
    				const userData = {
    					date: this.date,
    					time: this.time,
    					teamName: this.teamName,
    					totalPeople: this.totalPeople,
    					membername: this.membername,
    					memberidType: this.memberidType,
    					/*[this.memberidTypeIndex],*/
    					memberidNumber: this.memberidNumber,
    					memberphoneNumber: this.memberphoneNumber,
    					userInfoType: this.userInfoType

    				};

    				uni.setStorage({
    					key: 'userData',
    					data: JSON.stringify(userData),
    					success: function() {
    						console.log('数据存储成功');
    						uni.navigateTo({
    							url: '/pages/successfulAppoGroup/successfulAppoGroup'
    						})
    					}
    				})



    			},
    		},
    	};
</script>

<style>
	/* 添加你的样式 */
	.container {
		padding: 20px;
	}

	.title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 20px;
	}

	.form-group {
		margin-bottom: 15px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.form-group label {
		margin-bottom: 5px;
	}

	.form-group button {
		margin-top: 10px;
	}

	.picker {
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
	}


	.yuyue {
		border: 1px;
		border-style: solid;
		border-color: white;
		background-color: white;
		border-radius: 10px;
		border-width: 10px;
		border-top-width: 5px;
		border-bottom-color: #f3f5f9;
		border-bottom-style: none;
	}

	.team {
		border: 1px;
		border-color: white;
		border-style: solid;
		background-color: white;
		border-radius: 10px;
		border-left-width: 15px;
		border-right-width: 15px;
		border-bottom-width: 5px;
	}

	.aaa {
		border: 2px;
		border-color: #f3f5f9;
		border-style: solid;
		background-color: #f3f5f9;
		border-radius: 7px;
		width: 100%;
	}


	.ccc {
		border: 1px;
		border-color: white;
		border-style: solid;
		background-color: white;
		border-radius: 10px;
		border-left-width: 15px;
		border-right-width: 15px;
		border-bottom-width: 5px;
		width: 320px;
	}
  .button01{
    width: 351px;
    height: 45px;
    background: #8DCB6D;
    border-radius: 25px;
    margin-top: 1%;
  }
  .button02{
    width: 351px;
    height: 60px;
    background: #FFFFFF;
    border: 1px solid #8DCB6D;
    border-radius: 12px;
  }
  .img001{
	  width: 40px;
	  height: 24px;
	  background: #575B66;
	  margin-top: 10rpx;
  }
  .msg001{
	  display: flex;
	  flex-direction: row;
	  width: 100%;
	  height: 40px;
  }
  .label01{
	  width: 400px;
	  height: 21px;
	  font-family: PingFangSC-Medium;
	  font-weight: 500;
	  font-size: 15px;
	  color: #000000;
	  letter-spacing: 0;
	  margin-top: 10rpx;
  }
  .red{
    display: flex;
    flex-direction: row;
  }
  .img004{
    width: 20px;
    height: 20px;
    background: #8DCB6D;
    margin-top: 5rpx;

  }
  .extra-info{
    display: flex;
    flex-direction: row;
    margin-top: 10rpx;
  }
  .t2{
    width: 159px;
    height: 17px;
    opacity: 0.75;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #323232;
    letter-spacing: 0;
    margin-top: 10rpx;
  }
  .img003{
    width: 21px;
    height: 21px;
    background: #666666;
    margin-top: 25rpx;

  }
</style>